<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>作业报告</title>
    <style>
        *{font-size: 105%;}
        p::before {
            content: "";
            margin-left:15px;
        }
        
    </style>
</head>


<body>
    <h2>作业报告</h2>
    <h4>1.人员信息</h4>
    <p>单人完成: 余金勇 0223566 软件2210班</p>
    <h4>2.网站介绍</h4>
    <p>名称为“旅游网”，主要通过图片让访问者看下风景，了解一点各地的特色。</p>
    <h4>3.网站设计</h4>
    <p>共五张网页：一张主页，三张子页，一张报告</p>
    <ul>
        <li>主页：上方二级导航栏，右边便捷访问侧边栏，中心图组</li>
        <li>子页：均为居中显示
            <ul>
                <li>西宁：资料卡、自驾环线</li>
                <li>南京：攻略帖子、线路表格</li>
                <li>黔西南：文字介绍，可覆盖显示的图片集</li>
            </ul>
        </li>
        <li>报告</li>
    </ul>
    <h4>4.网站内容及技术</h4>
    <h5>4.1&nbsp;表格、图片、列表</h5>
    <p>表格在子页“南京”中，鼠标移动到对应行 会改变颜色</p>
    <img src="res/rp1.jpg" width="400px" height="auto">
    <p>网页使用了大量图片</p>
    <p>列表在上方“3.网页设计”中，主页二级导航栏也是用了列表</p>
    <h5>4.2&nbsp;float+clear布局</h5>
    <p>主页侧边栏用了这个</p>
    <h5>4.3&nbsp;position定位</h5>
    <p>应用：主页侧边栏、主页左上角</p>
    <h5>4.4&nbsp;文字浮于图片上</h5>
    <p>主页左上角</p>
    <img src="res/rp2.jpg" width="300px" height="auto">
    <h5>4.5&nbsp;伪类</h5>
    <p>主页导航栏和子页“黔西南”用了:hover</p>
    <h5>4.6&nbsp;伪元素</h5>
    <p>本页用这个缩进了一点</p>
    <img src="res/rp3.jpg" width="300px">
    <h5>难做的</h5>
    <p>子页“黔西南”中的四季图片:hover后的显示效果可能不如预期</p>
    <h4>5.最终结果与讨论</h4>
    <p>只用了html跟css还都很入门，但都起到了效果，没搞js比较单调吧。</p>
    <p>感觉这东西有点乱，看看之后的课程多学点东西。</p>

</body>